<template>
  <!-- 以下是题目内容 -->
  <div class="questionInfo-container">
    <div class="question-info">
      <span>【{{ questionType | questionTypeFilter }}】</span>
      <span style="color: #909399;"> ({{ questionType==isX?'多选题':'单选题' }})</span>
      <span style="float:right;color: #C0C4CC;">{{ question.createTime | timeFilter }}</span>
    </div>
    <!-- 题目问题 -->
    <div class="question-title">{{ questionInfo.quContent }}</div>
    <!-- 题目材料 -->
    <div class="question-materials">
      <span v-for="(item,index) in questionInfo.quImage"
            :key="index">
        <el-image style="width: 200px;margin-right:5px"
                  :src="item"
                  :preview-src-list="questionInfo.quImage" />
      </span>
    </div>
    <!-- 题目答案 -->
    <div class="question-answers">
      <!-- 不属于X型题 -->
      <template v-if="questionType!==isX">
        <el-radio v-for="item in questionInfo.answerList"
                  :key="item.id"
                  v-model="radioAnswer"
                  :label="item"
                  :disabled="true"
                  class="answer-item isWrong">
          <div class="answer-content">
            <template v-if="item.images">
              <div class="answer-img">
                <img v-for="(innerItem,innerIndex) in item.images"
                     :key="innerIndex"
                     :src="baseImgUrl + innerItem"
                     alt="获取图片失败">
              </div>
            </template>
            <div class="answer-text">{{ item.answer }}</div>
          </div>
        </el-radio>
      </template>
      <!-- 属于x型题 -->
      <template v-else>
        <el-checkbox-group v-model="checkboxAnswer">
          <el-checkbox v-for="item in questionInfo.answerList"
                       :key="item.id"
                       :label="item"
                       :disabled="true"
                       class="answer-item isWrong">
            <div class="answer-content">
              <template v-if="item.images">
                <div class="answer-img">
                  <img v-for="(innerItem,innerIndex) in item.images"
                       :key="innerIndex"
                       :src="innerItem"
                       alt="获取图片失败">
                </div>
              </template>
              <div class="answer-text">{{ item.answer }}</div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </template>
    </div>
    <div v-if="question.answerId=='N'"
         class="noAnswer">未作答</div>

    <!-- 操作按钮 -->
    <div class="btns">
      <span class="analysis-btn"
            @click="showAnalysis">{{ analysisVisible?'收起解析':'查看解析' }}
      </span>
    </div>

    <!-- 显示解析 -->
    <div v-if="analysisVisible"
         class="show-answer">
      <div class="true-answer">
        <span>正确答案: {{ trueAnswer | trueAnswerFilter }}</span>
      </div>
      <div class="analysis">解析: {{ question.analysis||'这道题还没有解析喔~' }}</div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
const LETTER = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] // 选项前缀
export default {
  name: 'Question',
  filters: {
    questionTypeFilter(id) {
      const questionType = {
        1: 'A1型题',
        2: 'X型题',
        3: 'A3/4型题',
        4: 'B型题',
        5: 'A2型题'
      }
      return questionType[id]
    },
    trueAnswerFilter(answer) {
      const arr = answer.split(',')
      answer = []
      for (const item of arr) {
        answer.push(LETTER[item])
      }
      return answer.join('、')
    },
    timeFilter(time) {
      time = new Date(time)
      return parseTime(time)
    }
  },
  props: {
    questionInfo: {
      type: Object,
      default() {
        return {}
      },
      required: true
    }
  },
  data() {
    return {
      question: this.questionInfo, // 题目信息
      questionType: this.questionInfo.quType, // 题目类型
      bankName: this.questionInfo.bankName,
      trueAnswer: this.questionInfo.trueOption, // 正确答案
      radioAnswer: null, // 单选题的答案
      checkboxAnswer: [], // 多选题的答案

      result: null, // 结果
      resultVisible: false, // 显示结果
      analysisVisible: false, // 显示解析

      isB: 4, // B型题
      isX: 2, // X型题
      baseImgUrl:"",
    }
  },
  created() {
    this.showAnswer()
    this.baseImgUrl = process.env.VUE_APP_BASE_IMG_URL
  },
  methods: {
    // 显示解析
    showAnalysis() {
      this.analysisVisible = !this.analysisVisible
    },
    showAnswer() {
      const allOption = this.question.allOption.split(',')
      if (this.questionType === this.isX) {
        const ids = this.question.answerId
          .split(',')
          .map((item) => allOption[item])
        for (const item of this.question.answerList) {
          // console.log()
          if (ids.includes(item.answer)) {
            this.checkboxAnswer.push(item)
          }
        }
      } else {
        this.radioAnswer = this.question.answerList.find(
          (item) => item.answer === allOption[this.question.answerId]
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 题目容器
.questionInfo-container {
  padding: 0px 10px;
  // 题目类型信息
  .question-info {
    margin-bottom: 20px;
  }
  // 题目问题
  .question-title {
    font-size: 16px;
    color: #333333;
    margin-bottom: 5px;
  }
  // 题目材料
  .question-materials {
    .materials-images {
      max-width: 200px;
      margin: 5px 0px 0px 20px;
      cursor: pointer;
    }
  }
  // 题目答案
  .question-answers {
    .answer-item {
      display: flex;
      width: 100%;
      padding: 10px 0px 0px;
      .answer-content {
        display: inline-block;
        .answer-img {
          font-size: 12px;
          color: #c0c4cc;
          vertical-align: bottom;
          margin-bottom: 5px;
        }
      }
    }
    // 覆盖el单选多选文字换行方式
    ::v-deep .el-radio,
    ::v-deep .el-checkbox {
      cursor: default;
      white-space: normal !important;
    }
    // 覆盖el单选多选禁用时字体颜色
    ::v-deep .is-disabled[class~='answer-item'] {
      .answer-text {
        color: #606266;
      }
    }
    // 高亮正确/错误的答案
    .isRight[class~='is-checked'] {
      .answer-text {
        color: #67c23a;
      }
    }
    .isWrong[class~='is-checked'] {
      .answer-text {
        color: #f56c6c;
      }
    }
  }
  .noAnswer {
    margin: 8px 24px 0px;
    font-size: 15px;
    color: #f56c6c;
  }
  // 查看解析按钮
  .btns {
    padding-top: 20px;
    .analysis-btn {
      display: inline-block;
      font-size: 15px;
      cursor: pointer;
    }
    .analysis-btn:hover {
      text-decoration: underline;
    }
  }
  // 显示答案 & 解析
  .show-answer {
    // min-height: 30px;
    font-size: 14px;
    color: #606266;
    border-top: 1px dashed #c0c4cc;
    margin-top: 15px;
    padding-top: 10px;
    .true-answer {
      padding-bottom: 10px;
      margin-bottom: 10px;
      line-height: 18px;
      border-bottom: 1px dashed #c0c4cc;
    }
  }
}
</style>
